<template>
  <div class="wrap">
    <div class="clear"></div>

    <div class="sel">
      <span class="txt">门店查询</span>
      <el-input style="width:200px;" v-model="params.storeName" placeholder="门店名称"></el-input>
   <el-input style="width:200px;" type="tel" v-model="params.romNum" @input="setNum" placeholder="房间数量  "></el-input>
     <el-button type="primary" round size="small" @click="getStoreList()">查询</el-button>
    </div>
    <el-table
    :data="storeList"
    stripe
    style="width: 100%;margin-top:20px;text">
     <el-table-column
     label="编号"
     align="center"
      type="index"
      width="50">
    </el-table-column>
    <el-table-column
      prop="store_name"
      label="门店名称"
       align="center"
      min-width="200">
    </el-table-column>
    <el-table-column
      prop="region"
       align="center"
      label="门店区域">
    </el-table-column>
    <el-table-column
      prop="room_num"
       align="center"
      label="房间数量">
    </el-table-column>
    <el-table-column
      prop="store_address"
      label="门店地址"
       align="center"
      min-width="300">
    </el-table-column>
    <el-table-column
      prop="ji_num"
       align="center"
      label="当前活动数量">
    </el-table-column>
    <el-table-column
      label="操作"
      align="center"
      >
    <template 
      slot-scope="scope">
      <el-button type="primary" round size="mini" @click="seeRoom(scope.row)">查看</el-button>
    </template>
</el-table-column>
  </el-table>
  <div style="text-align:center;margin-top:20px;"><el-pagination
  background
  layout="prev, pager, next"
  @current-change="current"
  :total="total">
</el-pagination></div>
  </div>
</template>
<script>
import Global from './../tool/Global.vue'
import axios from 'axios'
import qs from 'qs' // 将请求转换成form 表单提交形式
export default {
  data() {
    return {
      params: {
        page: 1,
        limit: 10,
        storeName:'',
        romNum:''
      },
      storeList:[],
      total:0,
      options:[]

    };
  },
  methods: {
    /**
     * 设置房间数量
     */
    setNum: function () {
      let num = this.params.romNum.replace(/[^0-9]/g,"");
      this.params.romNum = this.params.romNum.replace(/[^0-9]/g,"");
      this.$set(this.params,'romNum',num)
    },
  /**
   * 分页
   */
  current: function (page) {
    this.params.page = page
    this.getStoreList()
  },
  /**
   * 查看房间
   */
  seeRoom: function (info) {
    for(let key in info ) {
      sessionStorage[key]=  info[key]
    }
    this.$router.push({
      path:'/main/storeInfo',
      name:'storeInfo'
    })
  },
    /**
     * 获取门店列表
     */
    getStoreList: function() {
      let that = this;
      axios({
          method: 'post',
          data:qs.stringify(this.params),
          url:`store/selectStoreList`,
      }).then(res => {
            console.log(res)
          if (res.data.code == 0) {
            that.storeList = res.data.data
            that.total = res.data.count
          } else {
            that.$alert(res.msg); 
          }
        });
    },
    /**
     * 根据时间毫秒数 返回年月日
     */
    setDate: function (str) {
        let times = new Date(str)
        return `${times.getFullYear()}-${times.getMonth()+1 < 10 ?'0' + (times.getMonth() + 1) : times.getMonth()+1}-${times.getDate() < 10 ? '0' + times.getDate() : times.getDate()}`
    },
    /**
     * 根据时间毫秒数 返回时分秒
     */
    setTime: function (str) {
        let times = new Date(str)
        return `${times.getHours() < 10 ? '0' + times.getHours() : times.getHours()}:${times.getMinutes() < 10 ? '0' + times.getMinutes() : times.getMinutes()}:${times.getSeconds() < 10 ? '0' + times.getSeconds() : times.getSeconds()}`
    },
  },
  mounted () {
      this.getStoreList()
  }
};
</script>
<style scoped>
.wrap {
  padding: 68px 136px;
  /* width: 100%; */
}

.sel {
  height: 32px;
  line-height: 32px;
  padding: 23px 20px;
  background: #fff;
}
.sel .txt {
  font-family: PingFangSC-Medium;
  font-size: 14px;
  color: rgba(37, 38, 49, 1);
  font-weight: bold;
  width: 42px;
}
.sel input {
  width: 232px;
  height: 32px;
  background: rgba(255, 255, 255, 1);
  border-radius: 16px;
  border: 1px solid rgba(232, 236, 239, 1);
  color: #888888;
  margin-left: 17px;
  text-align: center;
  box-sizing: border-box;
  outline: none;
}
.sel-btn {
  color: #fff;
  width: 80px;
  height: 32px;
  background: #4B74FF;
  border-radius: 24px;
  border: 1px solid #4B74FF;
  text-align: center;
  margin-left: 37px;
  display: inline-block;
}
.sel select {
  width: 200px;
  height: 32px;
  background: rgba(255, 255, 255, 1);
  border-radius: 16px;
  border: 1px solid rgba(232, 236, 239, 1);
  font-size: 14px;
  font-family: PingFangSC-Regular;
  font-weight: 400;
  color: rgba(152, 169, 188, 1);
  margin-left: 17px;
  padding-left: 20px;
}
@media screen and (max-width: 1400px) {
  .sel input {
    width: 180px;
    margin: 0px;
  }
  .sel select {
    width: 180px;
    margin: 0px;
  }
  .sel-btn {
    margin: 0px;
  }
}
</style>
